button {
    display: inline-block;
    border: none;
    color: #fff;
    cursor: pointer;
    margin: 12px 18px;
    background: rgb(201, 108, 234);
    position: relative;
}
span {
    display: block;
    padding: 18px 60px
}
button::before,
button::after {
    content: "";
    width: 0;
    height: 2px;
    position: absolute;
    transition: all .2s linear;
    background: #fff
}
span::before,
span::after {
    content: "";
    width: 2px;
    height: 0;
    position: absolute;
    transition: all .2s linear;
    background: #fff
}
button:hover::before,
button:hover::after {
    width: 100%
}
button:hover span::before,
button:hover span::after {
    height: 100%
}
button::before,
button::after {
    transition-delay: .2s
}
button span::before,
button span::after {
    transition-delay: 0s
}
button::before {
    right: 0;
    top: 0
}
button::after {
    left: 0;
    bottom: 0
}
button span::before {
    left: 0;
    top: 0
}

button span::after {
    right: 0;
    bottom: 0
}

button:hover::before,
button:hover::after {
    transition-delay: 0s
}

button:hover span::before,
button:hover span::after {
    transition-delay: .2s
}